@import 'com/sass/_utils-wap';
@import 'compass/css3';
$icon:sprite-map("tea/jifen/spr/*.png",$spacing:10px);


$Color333: #333;
$Coloraaa: #aaa;
 
@mixin border-radius($radius){
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}
a{text-decoration: none;}
a:hover{text-decoration: none; outline: none;}
.clear{clear: both;}
#head{
    height: 96px/$ppr;
    width: 100%;
    border-bottom: 1px solid #dcdcdc;
    position: relative;
    font-size: 34px/$ppr;
    color: $Color333;
    text-align: center;
    line-height: 96px/$ppr;
    background: #fff;
    .back{
        width: 55px/$ppr;
        height: 96px/$ppr;
        line-height: 96px/$ppr;
        text-align: center;
        display: block;
        position: absolute;
        top: 0;
        left: 24px/$ppr;
        color: $Coloraaa;
        span.icon-zuojiantou{
        font-size: 44px/$ppr;
        }
    }
}
.nav{
    position: fixed;
    top: 96px/$ppr;
    left: 0;
    background: #fff;
    z-index: 8888;
    height: 96px/$ppr;
    width: 100%;
    border-bottom: 1px solid #dcdcdc;
    a{
        font-size: 28px/$ppr;
        color: $Color333;
        line-height: 96px/$ppr;
        display: inline-block;
        width: 25%;
        text-align: center;
        margin:0 3.2%;
        &.active{
            color: #12b7f5;
            border-bottom: 2px solid #12b7f5;
            text-decoration: none;
        }
    }
}

.load{
    font-size: 24px/$ppr;
    color: $Coloraaa;
    text-align: center;
    height: 100px/$ppr;
    padding-top: 300px/$ppr;
}

.produce-list{
    margin-top: 192px/$ppr;
    background: #f1f1f1;
    padding:1.33% 0;
    .produce{
        width: 48%;
        float: left;
        margin-left: 1.33%;
        padding-bottom: 12px/$ppr;
        background: #fff;
        margin-bottom: 1.33%;
        img{
            width: 100%;
            height: 300px/$ppr; 
            }
        .produce-info{
            font-size: 28px/$ppr;
            color: $Color333;
            line-height: 45px/$ppr;
            padding: 0 15px/$ppr;
            height: 90px/$ppr;
            overflow: hidden;
        }  

        .produce-price{
            font-size: 24px/$ppr;
            padding: 15px/$ppr;
            span{
               color: $Coloraaa;
                font-size: 24px/$ppr;
                 padding-right: 15px/$ppr;
                .icon-zhibodou{
                    padding-right: 0px/$ppr;
                    font-size: 34px/$ppr;
                }
            }
            i{
                color: #ff6600;
            }
        }

    }
}

.produce-dec{
    width: 100%;
    height: 400px/$ppr;
    background: url(/images/wap/jifen/line-bg.png) ;
    img{
        height: 400px/$ppr;
        width: 400px/$ppr;
        display: block;
        margin: 0 auto;
    }
}
.produce-dh{
    height: 120px/$ppr;
    line-height: 120px/$ppr;
    width: 100%;
    border-bottom: 1px solid #dcdcdc;
    .price{
        font-size: 50px/$ppr;
        color: #FF6600;
        margin-left: 30px/$ppr;
        .icon-zhibodou{
            color: $Coloraaa;
            font-size: 40px/$ppr;
        }
        em{
           font-size: 24px/$ppr;
           color: $Coloraaa;
           padding-left: 20px/$ppr;
        }
    }
    .dh{
        display: block;
        height: 80px/$ppr;
        width: 200px/$ppr;
        background: #12b7f5;
        color: #FFF;
        font-size: 34px/$ppr;
        line-height: 80px/$ppr;
        text-align: center;
        float: right;
        margin:20px/$ppr 24px/$ppr 0 0;
        @include border-radius(5px);
    }
    .disable-btn{
        @extend .dh;
        background: #ccc;
        @include border-radius(5px);
    }
}

.produce-txtinfo{
    color: $Color333;
    padding: 25px/$ppr;
    h2{
        font-size: 34px/$ppr;
        line-height: 50px/$ppr;
        font-weight: bold;
        padding: 10px/$ppr 0;
    }
    p{
        font-size: 28px/$ppr;
        line-height: 40px/$ppr;
        padding-bottom: 20px/$ppr;
    }
}
.produce-adres{
    height: 240px/$ppr;
    padding: 0 24px/$ppr;
    color: $Color333;
    font-size: 28px/$ppr;
    .title{
        line-height: 30px/$ppr;
        padding: 40px/$ppr 0;
        span.icon-xin{
          color: #ff686d;
          font-size: 36px/$ppr;
          padding-right: 15px/$ppr;
        }
    }
    p{
        line-height: 35px/$ppr;
    }
}
.tit-nav{
    height: 80px/$ppr;
    line-height: 80px/$ppr;
    padding: 0 24px/$ppr;
    background: #F1F1F1;
    color: $Color333;
    font-size: 28px/$ppr;
}
.inp{
    height: 96px/$ppr;
    line-height: 96px/$ppr;
    padding: 0 24px/$ppr;
    background: #fff;
    color: $Color333;
    font-size: 28px/$ppr;
    border-bottom: 1px solid #dcdcdc;
    input{
        border: 0;
        padding-left: 24px/$ppr;
        width: 70%;
    }
    input.showCityPicker{
        padding-left:0px/$ppr;
        font-size: 28px/$ppr;
    }
    .icon-dingwei{
         padding-left: 22px/$ppr;
    }
    .icon-jiantouyou{
        float: right;
    }
}
.sub{
    height: 96px/$ppr;
    line-height: 96px/$ppr;
    width: 90%;
    background: #83ddff;
    color: #c1edfe;
    font-size: 34px/$ppr;
    text-align: center;
    border:0 ;
   @include border-radius(8px);
    margin: 40px/$ppr auto;
    display: block;
}
.sub-color{
  @extend .sub;
  background: #12b7f5;
  color: #fff;
   margin: 40px/$ppr auto 24px/$ppr;
}

.sub-nobg{
  @extend .sub;
  background: #fff;
  border: 1px solid #12b7f5;
  color: #12b7f5;
}
.duihu-ok{
     text-align: center;
    .dui-okbg{
        width: 220px/$ppr;
        height: 280px/$ppr;
        margin: 56px/$ppr auto 24px/$ppr;
        img{
            width: 100%;
            height:100%;
        }
    }
    h2{
        font-size:34px/$ppr;
        color: $Color333; 
        padding-bottom: 80px/$ppr;
    }
    p{
        font-size: 28px/$ppr;
        color: $Coloraaa;
        line-height: 50px/$ppr;
    }
}
    .sy-dou{
         margin-top: 192px/$ppr;
         padding: 24px/$ppr ;
         font-size: 28px/$ppr; 
         color: $Color333;
         i{
            color: #FF686D;
         } 
    }  
.dou-info{
    background: #f1f1f1;
    .comm-list{
        height: 160px/$ppr;
        border-top: 1px solid #dcdcdc;
        background: #fff;
        padding:0 24px/$ppr ;
        .info-l{
            float: left;
            width: 60%;
            font-size: 28px/$ppr;
            color: $Color333;
            overflow: hidden;
            height: 80px/$ppr;
            margin-top: 52px/$ppr;
        }
        .time-r{
            float: right;
            width: 40%;
            text-align: right;
            .tbcom{
                 height: 50px/$ppr;
                 line-height: 50px/$ppr;
                 overflow: hidden;
            }
            .top{
                @extend .tbcom;
                 margin-top: 30px/$ppr;
                 color: #66d828;
            }
            .top-color{
                 color: #FF686D;
            }
            .bot{
                @extend .tbcom;
                color: $Coloraaa;
                font-size: 22px/$ppr;
            }
        }
    }
}
.lipin-dec{
        margin-top: 192px/$ppr;
        background: #f1f1f1;
        padding: 24px/$ppr 0 0;
    .lipin-list{
        margin-bottom: 24px/$ppr;
        background: #fff;
        border-bottom: 1px solid #dcdcdc;
        .lipin-order{
           border-bottom: 1px solid #dcdcdc;
           padding:0 24px/$ppr ;
           height: 96px/$ppr;
           line-height: 96px/$ppr;
           font-size: 28px/$ppr;
           color: $Color333;
           position: relative;
           .huo-nok{
                color: #FF686D;
                float: right;
           }
           .huo-err{
                float: right;
                color: $Coloraaa;
           }
           .huo-ok{
                float: right;
                margin-top: -15px/$ppr;
           }
           .huo-from{
               color: $Coloraaa;
               font-size: 22px/$ppr;
               position: absolute;
               right: 24px/$ppr;
               bottom: -25px/$ppr;
           }
        }
        .lipin-info{
           padding: 24px/$ppr ;
            height: 232px/$ppr;
            dl dt{
                height: 232px/$ppr;
                width: 232px/$ppr;
                float: left;
                margin-right: 24px/$ppr;
                img{
                    height: 100%;
                    width: 100%;
                }
            }
            dl dd{
                 color: $Color333;
                 font-size: 28px/$ppr;
                 height: 58px/$ppr;
                line-height:58px/$ppr;
                display:block;
                white-space:nowrap;
                 overflow:hidden;
                  text-overflow:ellipsis;
            }
        }
    }
}
#splPage{
    padding: 20px 0 30px;
    text-align: center;

    a{
        border: 1px solid #e8e8e8;
        background-color: #f0f0f0;
        color: #555;
        display: inline-block;
        height: 24px/$ppr;
        line-height: 24px/$ppr;
        padding:3px 10px;
        margin: 0 4px;
        border-radius: 3px;
         font-size: 22px/$ppr;
    }
    .cur{

        @extend a;
        border: 1px solid #26bced;
        background-color: #26bced;
        color: #fff;
    }
}
#footer{
    height: 96px/$ppr;
    a{
        width: 33.333%;
        float: left;
        text-align: center;
        color: $Coloraaa;
         font-size: 22px/$ppr;
    }
}

/*==========以下部分是Validform必须的===========*/
.Validform_checktip{
    margin-left:8px;
    line-height:20px;
    height:20px;
    overflow:hidden;
    color:#999;
    font-size:12px;
}
.Validform_right{
    color:#71b83d;
    padding-left:20px;
    background:url(../images/right.png) no-repeat left center;
}
.Validform_wrong{
    color:red;
    padding-left:20px;
    white-space:nowrap;
    background:url(../images/error.png) no-repeat left center;
}
.Validform_loading{
    padding-left:20px;
    background:url(../images/onLoad.gif) no-repeat left center;
}
.Validform_error{
    background-color:#fff;
}
#Validform_msg{color:#7d8289; font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; width:280px; -webkit-box-shadow:2px 2px 3px #aaa; -moz-box-shadow:2px 2px 3px #aaa; background:#fff; position:absolute; top:0px; right:50px; z-index:99999; display:none;filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999');}
#Validform_msg .iframe{position:absolute; left:0px; top:-1px; z-index:-1;}
#Validform_msg .Validform_title{line-height:25px; height:25px; text-align:left; font-weight:bold; padding:0 8px; color:#fff; position:relative; background-color:#000;}
#Validform_msg a.Validform_close:link,#Validform_msg a.Validform_close:visited{line-height:22px; position:absolute; right:8px; top:0px; color:#fff; text-decoration:none;}
#Validform_msg a.Validform_close:hover{color:#cc0;}
#Validform_msg .Validform_info{padding:8px;border:1px solid #000; border-top:none; text-align:left;}
